<template>

	<view class="page ">
		<view class="top-content">
		<canvas id="qrcode" canvas-id="qrcode" style="width: 134px;height: 134px;margin: 0 auto;"></canvas>
		<u-button color="linear-gradient( 90deg, #FB5351 0%, #FF7352 100%)" text="保存分享码" @tap="save" style="margin: 20rpx 0;"></u-button>
		</view>
		<view class="bot-content-wapper" >
			<view class="bot-content">
				<u-tabs :list="list"  lineWidth="28rpx"
					lineColor="#fa2b28" :activeStyle="{
				               color: '#453C3C',
				               fontWeight: '600',
				              
				           }" :inactiveStyle="{
				              color: '#3F3B3B',
				              fontWeight: '300',
				              
				           }"  itemStyle=" height:88rpx;"
					@change="changetab"></u-tabs>
					
			</view>
			<view class="bot-content-1"  v-if="state.tabindex===0">
				<view class="top ss-flex">
					<view class="item">
						头像
					</view>
					<view class="item">
						昵称
					</view>
					<view class="item">
						时间
					</view>
					<!-- <view class="item">
						返还积分
					</view> -->
				</view>
				<view class="list">
					<u-empty
					v-if="state.datalist.length<1"
					        
					       
					>
					</u-empty>
					<view class="list-item ss-flex" v-for="item in state.datalist">
						<view class="item ss-flex">
							<image :src="item.avatar" mode="" class="avatar"></image>
						</view>
						<view class="item u-line-1">
							{{item.nickname}}
						</view>
						<view class="item" style="font-size: 22rpx; line-height: 30rpx;">
							{{item.createtime}}
						</view>
					<!-- 	<view class="item">
							{{item.id}}
						</view> -->
					</view>
				</view>
			</view>
			<view class="bot-content-1"  v-if="state.tabindex===1">
				<view class="top ss-flex">
					<view class="item" style="width: 100rpx;">
						排名
					</view>
					<view class="item" style="width: 250rpx;text-align: center;">
						头像
					</view>
					<view class="item">
						昵称
					</view>
					<view class="item" style="margin-left: auto;text-align: right;">
						人数
					</view>
				</view>
				<view class="list">
					<u-empty
					v-if="state.datalist.length<1"
					        
					       
					>
					</u-empty>
					<view class="list-item ss-flex" v-for="(item,index) in state.datalist">
						<view class="" style="width: 100rpx;">
							<image :src="`/static/ph${index+1}.png`" mode="" class="avatar" v-if="index<3"></image>
							<text v-else>{{index+1}}</text>
						</view>
						<view class="item ss-flex ss-row-center" style="width: 250rpx;text-align: center;">
							<image :src="item.avatar" mode="" class="avatar"></image>
						</view>
						<view class="item u-line-1">
							{{item.nickname}}
						</view>
						
						<view class="item" style="margin-left: auto;text-align: right;">
							{{item.share_num}} <text>人</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="fixed" v-show="state.showqrcode">
		
			<u-button  text="取消" @tap="state.showqrcode=false"></u-button>
		</view> -->
		<richtextPop ref="richtextPop1"></richtextPop>

	</view>
</template>

<script setup>
	import LC from '@/LC';
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
import richtextPop from '../auth/richtext_pop.vue';

	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	let list=[{name:'邀请记录'},{name:'邀请排行'}]
	let appinfo = computed(() => LC.$store('app').info)
	let info = computed(() => LC.$store('user').info)
	let richtextPop1 = ref(null)
	let state=reactive({
		pageData:{
			page: 1,
			limit:15,
			status: 'loading'
		},
		showqrcode:false,
		keyword:'',
		tabindex:0,
		
		datalist:[]
	})
	function back() {
		LC.$router.back()
	}
	onNavigationBarButtonTap(()=>{
		richtextPop1.value.open({id:'jfgz',title:'活动规则'})
	})
	
	onLoad(() => {
		
	openshare()
	
		getlist()
	})
	function openshare(){
		// state.showqrcode=true
		setTimeout(()=>{
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = "http://yaoqing.gzxzgl.com/#/pages/user/sharePage?code="+info.value.code;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 130;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},300)
		// 获取uQRCode实例
	
	
	}
	
	function save(){
		uni.canvasToTempFilePath(
		    {
		        canvasId: 'qrcode',
		        fileType: 'png',
		        width: 200,
		        height: 200,
		        success:( {tempFilePath}) => {
		            // #ifdef H5
		            const aEle = document.createElement('a');
					aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
					aEle.href = tempFilePath;
				
					aEle.click();
					aEle.remove(); //
		            // #endif
					// #ifdef APP
					uni.saveImageToPhotosAlbum({
					    filePath: tempFilePath,
					    success: res => {
							uni.$u.toast("保存成功")
					        console.log(res);
					    },
					    fail: err => {
					        console.log(err);
					    }
					});
					// #endif
					
					
					
		        },
		        fail: err => {
		            console.log(err);
		        }
		    }, 
		    // this // 组件内使用必传当前实例
		);
	}
	
	function getlist() {
	
		LC.$api.user.sharelog({
				...state.pageData,
				
			})
			.then(({
				res,
				data
			}) => {
	
	
				state.datalist = [...state.datalist, ...data.data]
				
				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}
	
	
				state.pageData.status = 'loadmore'
				state.pageData.page += 1
	
			})
	
	}
	
	function getlist1() {
	
		LC.$api.user.sharephb()
			.then(({
				res,
				data
			}) => {
	
	
				state.datalist =data
				
				
	
			})
	
	}
	
	onReachBottom(() => {
		onbottom()
	})
	
	
	
	function onbottom() {
		if(state.tabindex===1){
			return
		}
	
		let {
			status,
			load,
			limit,
			page
		} = state.pageData
	
		if (status != 'nomore' && !load) {
	
			getlist()
	
	
		}
	}

	function copy(a) {
		if (a) {
			uni.setClipboardData({
				data: a, //当前点击的地址
				success: () => {
					uni.showToast({
						title: '已复制',
						icon: "none"
					})
				}
			});
		}
	}
	function changetab({index}){
			state.tabindex=index
			state.datalist=[]
			state.pageData={
				page: 1,
				limit:15,
				status: 'loading'
			}
			if(index===1){
				getlist1() 
				return 
			}
			getlist() 
		}
</script>

<style lang="scss">
	.fixed{
		position: fixed;
		top: 280rpx;
		left: 50vw;
		z-index: 22222;
		transform: translateX(-50%);
		background-color: #EAEAEA;
		padding:50rpx 40rpx;
	}
	.bot-content{
		    width: 690rpx;
		    height: 88rpx;
		    background: #fff;
		    border-radius: 20rpx 20rpx 0 0;
		    margin: 0rpx 30rpx 0 30rpx;
		    position: relative;
		    z-index: 2;
		  
		    line-height: 88rpx;
			&-wapper{
				 background: #fff;
			}
		
	}
	.bot-content-1{
		margin: 0 30rpx;
		.avatar{
			width: 80rpx;
			height: 80rpx;
		}
		.top,.list-item{
			background: #fff;
			position: relative;
			z-index: 222;
			    height: 88rpx;
			    display: flex;
			    padding: 0 30rpx;

			    font-size: 26rpx;
			    font-weight: 400;
			    color: #333;
			    line-height: 88rpx;
			    text-align: center;
			.item{
				
				&:nth-child(1){
					width: 80rpx;
				}
				&:nth-child(2){
					width: 130px;
					text-align: center;
					}
				&:nth-child(3){
					width: 250rpx;
					text-align: center;
				}
				&:nth-child(4){
					width: 170rpx;
					text-align: center;
				}
			}
		}
	}
		
	.status-bar {
		height: var(--status-bar-height);
	}


	.top-content {
	padding: 30rpx 0;
		height: 360rpx;
		background-image: url(/static/yqyl12.png);
		background-size: 100% 100%;
		position: relative;
	.gz{
		width: 156rpx;
		    height: 60rpx;
		    background: #fc7460;
		    border-top-left-radius: 30rpx;
		    border-bottom-left-radius: 30rpx;
		    font-size: 26rpx;
		    font-weight: 600;
		    color: #fff;
		    text-align: center;
		    line-height: 60rpx;
		    position: absolute;
		    right: 0;
		    top: 30rpx;
		    z-index: 1;
	}
		.button{
			width: 240rpx;
			    height: 78rpx;
			    background: linear-gradient(0deg, #e9af6f, #fde6ca);
			    border-radius: 40rpx;
			    font-size: 28rpx;
			    font-weight: 400;
			    color: #5a3b1a;
			    line-height: 78rpx;
			    text-align: center;
				position: absolute;left: 50%;
				transform: translateX(-50%);
				bottom: 120rpx;
		}
		.invite-box1-1 {
			position: absolute;
			font-size: 26rpx;
			font-weight: 400;
			color: #ec5c37;
			line-height: 60rpx;

			top: 280rpx;
			left: 240rpx;
			width: 290rpx;
			z-index: 2;

			&-two {
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #ec5c37;
				line-height: 60px;

				text {
					font-size: 68rpx;
					font-weight: 700;
					color: #fa2b28;
					padding: 0 10rpx;

				}
			}
		}
	}

	.title {

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 38rpx;
		color: #333333 !important;
		line-height: 53rpx;
		position: relative;

	}

	.title1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #FC5652;
		margin-top: 23rpx;

		image {
			width: 25rpx;
			height: 14rpx;
		}
	}

	.image {
		display: flex;

		width: 613rpx;
		margin: 0 auto;
		margin-top: 99rpx;
		margin-bottom: 137rpx;
		height: 613rpx;
	}

	.data-content {
		border-radius: 19px;
		border: 2rpx solid #EAEAEA;
		padding: 0 21rpx;

		.item {
			padding: 25rpx 0;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.link {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				margin-left: auto;
				color: #333333;
				line-height: 38rpx;
			}

			image {
				margin-left: 25rpx;
				width: 53rpx;
				height: 53rpx;
			}
		}
	}

	.top_icon {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.page {}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>